<template>
  <BasicVxeModal
    v-bind="$attrs"
    :width="920"
    :min-width="700"
    :min-height="400"
    :title="title"
    :show-close="false"
    :show-maximize="false"
    @register="registerModal"
    @ok="handleConfirm"
  >
    <template #[item]="data" v-for="item in Object.keys($slots)">
      <slot :name="item" v-bind="data || {}"></slot>
    </template>

    <template #title>
      <div style="display: flex; align-items: center; justify-content: space-between">
        <BasicTitle :title="title" :show-span="false" :show-gradient-bar="false" />
        <div style="display: flex">
          <slot name="title_right"> </slot>
          <el-checkbox
            v-if="showCheckAll"
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAll"
            >全选</el-checkbox
          >
        </div>
      </div>
    </template>

    <div style="display: flex; justify-content: space-between; padding: 15px">
      <template v-if="options.length">
        <el-checkbox-group
          v-model="checkboxList"
          style="
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            justify-content: center;
            width: 100%;
          "
          @change="handleCheckItemChange"
        >
          <el-checkbox
            v-for="(item, index) in options"
            :key="index"
            :label="item.label"
            :value="item.value"
            :border="true"
            style="width: 200px; overflow: hidden"
            >{{ item.label }}
          </el-checkbox>
        </el-checkbox-group></template
      >
      <template v-else> <el-empty description="暂无数据" style="width: 100%" /> </template>
    </div>
  </BasicVxeModal>
</template>

<script setup lang="ts">
  /**
   * 弹窗选择器
   */

  import { CheckboxGroupValueType, CheckboxValueType } from 'element-plus'
  import { useVxeModalInner } from '@/components/ui/vxe-modal'

  const props = defineProps({
    title: {
      type: String,
      default: ''
    },
    options: {
      type: Array as PropType<LabelValueOption[]>,
      default: () => []
    },
    showCheckAll: {
      type: Boolean,
      default: true
    }
  })

  const emits = defineEmits(['confirm', 'register'])

  const isIndeterminate = ref(true)
  const checkAll = ref(false)
  const checkboxList = ref<CheckboxGroupValueType>([])

  const [registerModal, { closeModal }] = useVxeModalInner(async (_data) => {
    // setModalProps({ confirmLoading: false })
    checkboxList.value = _data.defaultChecked as CheckboxGroupValueType
  })

  // 全选
  const handleCheckAll = (val: CheckboxValueType) => {
    checkboxList.value = val ? props.options.map((v) => v.value) : []
    isIndeterminate.value = false
    checkAll.value = !!val
  }

  // 单选
  const handleCheckItemChange = (value: CheckboxValueType[]) => {
    const checkedCount = value.length
    checkAll.value = checkedCount === props.options.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < props.options.length

    if (value.length != props.options.length) {
      checkAll.value = false
    } else {
      checkAll.value = true
    }
    checkboxList.value = value as CheckboxGroupValueType
  }

  // 确定
  const handleConfirm = () => {
    emits('confirm', checkboxList.value)
    closeModal()
  }

  defineExpose({
    handleCheckAll
  })
</script>

<style lang="scss" scoped></style>
